<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>suusu</title>
    <style>
        body{
            margin: 0;
            background-image: url("img/bac.webp");
        }
        .footer{
            width: 760px;
            height: 240px;
            margin: 300px auto;
        }
        .west{
                /* 浮动(横排) left向左(从左至右) */
                float: left;
                /* 百分比是参考当前这个元素的父元素计算的 */
                width: 25%;
                height: 100%;
                /* 背景重复 不重复 */
                background-repeat: no-repeat;
                /* 背景位置 y方向 居中 */
                background-position-y: center;
            }
            .west1{
                /* 背景图片 url图片路径 */
                background-image: url("img/west_01.png");
                /* 播放动画 动画名称 时间 脚步(8) 循环 */
                animation: swk 1.4s steps(8) infinite;
                /* 整个动画走1600px 走8步 每一步200px 这200px是瞬间到达的 */
            }
            .west2{
                background-image: url("img/west_02.png");
                animation: zbj 1.4s steps(8) infinite;
            }
            .west3{
                background-image: url("img/west_03.png");
                animation: ts 1.4s steps(8) infinite;
            }
            .west4{
                background-image: url("img/west_04.png");
                animation: ss 1.4s steps(8) infinite;
            }
            /* 关键帧(画面) 动画名称(自定义) */
            @keyframes swk{
                /* 动画开始的画面 */
                0%{
                    /* 背景位置 x方向 -1600px */
                    background-position-x: 0px;
                }
                /* 结束 */
                100%{
                    background-position-x: -1600px;
                }
            }
            @keyframes zbj{
                /* 动画开始的画面 */
                0%{
                    /* 背景位置 x方向 -1600px */
                    background-position-x: 0px;
                }
                /* 结束 */
                100%{
                    background-position-x: -1600px;
                }
            }
            @keyframes ts{
                /* 动画开始的画面 */
                0%{
                    /* 背景位置 x方向 -1600px */
                    background-position-x: 0px;
                }
                /* 结束 */
                100%{
                    background-position-x: -1360px;
                }
            }
            @keyframes ss{
                /* 动画开始的画面 */
                0%{
                    /* 背景位置 x方向 -1600px */
                    background-position-x: 0px;
                }
                /* 结束 */
                100%{
                    background-position-x: -1680px;
                }
            }
            .su{
                color: red;
                margin: 200px auto;
                text-align: center;
            }
    </style>
</head>
<body>
    <h2 class="su">下一站:盘丝洞</h2>
    <div class="footer">
        <div class="west west1"></div>
        <div class="west west2"></div>
        <div class="west west3"></div>
        <div class="west west4"></div>
    </div>
</body>
</html>